<template>
  <!-- 音频模块 -->
  <div class="audio">
    <div class="bookContainer" v-for="(item,i) in info.banner" :key="i">
      <div>
        <img :src="$fnc.getImgUrl(item.piclink)" width="90px" height="115px" alt />
        <div class="tag">听书</div>
      </div>
      <div>
        <div>
          <p>
            <!-- 《{{item.title}}》
            <span>|</span>{{item.nickname}}解读 -->
            {{title(item)}}
          </p>
          <p v-html="item.content.length > 38 ? item.content.slice(0,38) + '...' : item.content"></p>
        </div>
        <div>
          <span>{{item.times}}</span>
          <div>
            <div>
              <van-icon name="star-o" />
            </div>
            <div>
              <van-icon name="play-circle-o" />播放
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    props: {
      info: {
        type: Object,
        default: () => ({})
      }
    },
    methods: {
      title(item) {
        var title = "《" + item.title + "》";
        var nick = "| " + item.character + "解读";
        var titleNick = title+nick;
        return titleNick.length > 15 ? titleNick.slice(0,15)+"..." : titleNick;
      }
    }
  }
</script>

<style lang="less" scoped>
  .audio {
    margin: 10px;
  }

  .bookContainer {
    display: flex;
    padding: 10px;
    margin: 15px 0;
    background: #fff;
    border-radius: 10px;

    >div:nth-child(1) {
      width: 22%;
      // width: 80px;
      height: 105px;
      background-color: skyblue;
      position: relative;
      border-radius: 5px;
      overflow: hidden;

      .tag {
        position: absolute;
        color: #fff;
        bottom: 3px;
        right: 3px;
        font-size: 12px;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 0 3px;
      }
    }

    >div:nth-child(2) {
      // width: 100%;
      width: 78%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      line-height: 20px;
      padding-left: 15px;

      >div:nth-child(1) {
        >p:nth-child(1) {
          font-size: 16px;
          font-weight: bold;
          margin-left: -7px;

          span {
            margin-right: 3px;
            margin-left: -4px;
          }
        }

        >p:nth-child(2) {
          color: rgb(60, 67, 58);
          padding-top: 5px;
          font-size: 13px;
        }
      }

      >div:nth-child(2) {
        >span {
          font-size: 12px;
          color: rgb(255, 107, 1);
        }

        display: flex;
        align-items: center;
        justify-content: space-between;

        >div {
          display: flex;
          align-items: center;

          >div {
            display: flex;
            align-items: center;
          }

          >div:nth-child(1) {
            color: rgb(105, 102, 102);
            background-color: rgb(245, 243, 243);
            width: 40px;
            height: 30px;
            justify-content: center;
            border-radius: 15px;
            margin-right: 8px;
          }

          >div:nth-child(2) {
            width: 70px;
            height: 30px;
            color: rgb(236, 118, 22);
            justify-content: center;
            background-color: rgb(245, 243, 243);
            border-radius: 15px;
            margin-right: 10px;

            i {
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
</style>
